.triang-chart-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  .triang-chart {
    width: calc(100% - 128px);
    height: calc(100% - 26px);
    position: relative;
    margin: 0 auto;
    .first-line {
      display: flex;
      justify-content: space-between;
      width: 100%;
      border-top: 2px solid #dce0e6;
      position: absolute;
      bottom: -29px;
      font-size: 12px;
      color: #8b98a9;
      padding-top: 10px;
      left: 0px;
      .text {
        position: absolute;
        right: -65px;
        // width: 57px;
        // white-space: nowrap;
        // overflow: hidden;
        // text-overflow: ellipsis;
      }
    }
    .second-line {
      display: flex;
      justify-content: space-between;
      width: 100%;
      border-bottom: 2px solid #dce0e6;
      position: absolute;
      bottom: -12px;
      transform: rotate(-60deg);
      transform-origin: left;
      font-size: 12px;
      color: #8b98a9;
      padding-bottom: 10px;
      left: -11px;
      span {
        transform: rotate(60deg);
      }
      .text {
        position: absolute;
        top: 0px;
        left: -53px;
      }
    }
    .third-line {
      display: flex;
      justify-content: space-between;
      width: 100%;
      border-bottom: 2px solid #dce0e6;
      position: absolute;
      bottom: -11px;
      transform: rotate(60deg);
      transform-origin: right;
      font-size: 12px;
      color: #8b98a9;
      padding-bottom: 10px;
      left: 10px;
      span {
        transform: rotate(-60deg);
      }
      .text {
        position: absolute;
        left: -40px;
        top: 0px;
      }
    }
    .point {
      width: 100%;
      position: absolute;
      bottom: 0;
      .point-item {
        position: absolute;
        display: flex;
        align-items: center;
        .block {
          width: 10px;
          height: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 3px;
          .circle {
            display: inline-block;
            width: 6px;
            height: 6px;
            background: #5a86ff;
            border: 1px solid #ffffff;
            border-radius: 50%;
            &:hover {
              width: 10px;
              height: 10px;
              background: #5a86ff;
              box-shadow: 0px 0px 4px 0px rgba(82, 141, 249, 0.6);
              border: 2px solid #ffffff;
              cursor: pointer;
              box-sizing: border-box;
            }
          }
        }
        .text {
          font-size: 12px;
          color: #617185;
        }
      }
    }
  }
}

.ant-tooltip.triang-chart-tooltip.ant-tooltip-placement-right {
  .ant-tooltip-content {
    .ant-tooltip-inner {
      padding: 12px;
    }
  }
}
